<template>
  <div id="Goods">
    <div class="box">
      <div class="box_header">
        <div>时间范围</div>
        &nbsp;
        <div class="block">
          <el-date-picker v-model="valueTime" type="datetimerange" start-placeholder="Start date"
            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss" @change="changeTime" />
        </div>
        &nbsp;
        <div>
          <el-button type="primary" @click="handleGoodsFind">查询</el-button>
        </div>
      </div>
      <div class="box_body">
        <div id="main" style="width: 88vw;height:40vh;"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchLoginTwentyFour } from '../../api/index';
//引入echarts图
import * as echarts from 'echarts';
const valueTime = ref('')

//获取起始和结束时间
function changeTime(val: any) {
  //console.log(val[0]);
  //console.log(val[1]);

  //起始时间转换
  const dateObjStart = new Date(val[0]);
  const formattedDateStart = ref(
    `${dateObjStart.getFullYear()}-${String(dateObjStart.getMonth() + 1).padStart(2, '0')}-${String(dateObjStart.getDate()).padStart(2, '0')} ${String(dateObjStart.getHours()).padStart(2, '0')}:${String(dateObjStart.getMinutes()).padStart(2, '0')}:${String(dateObjStart.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateStart.value);//转换成功

  //截至时间转换
  const dateObjEnd = new Date(val[1]);
  const formattedDateEnd = ref(
    `${dateObjEnd.getFullYear()}-${String(dateObjEnd.getMonth() + 1).padStart(2, '0')}-${String(dateObjEnd.getDate()).padStart(2, '0')} ${String(dateObjEnd.getHours()).padStart(2, '0')}:${String(dateObjEnd.getMinutes()).padStart(2, '0')}:${String(dateObjEnd.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateEnd.value);//转换成功

  startTime.value = formattedDateStart.value;
  endTime.value = formattedDateEnd.value;
}

//通过得到的时间获取数据
const startTime = ref('2019-10-10 00:00:00');
const endTime = ref('2024-11-08 00:00:00');

//onMounted钩子函数在页面加载时加载echarts图
onMounted(() => {

})

//拿到echarts图的数据
const handleGoodsFind = async () => {
  //console.log(startTime.value,endTime.value);
  const res = await fetchLoginTwentyFour({ date: JSON.stringify([startTime.value, endTime.value]) });
  console.log(res.data.data);
  const myArray = res.data.data;

  //cs
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  // 指定图表的配置项和数据
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [myArray[0].category, myArray[1].category, myArray[2].category, myArray[3].category, myArray[4].category, myArray[5].category, myArray[6].category, myArray[7].category, myArray[8].category, myArray[9].category],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [

      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [myArray[0].totalSell, myArray[1].totalSell, myArray[2].totalSell, myArray[3].totalSell, myArray[4].totalSell, myArray[5].totalSell, myArray[6].totalSell, myArray[7].totalSell, myArray[8].totalSell, myArray[9].totalSell],
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<style scoped>
.box {
  width: 85vw;
  height: 40vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  display: flex;
  line-height: 3vw;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {

  >div {
    height: 1.5vw;
    font-size: 1vw;
    position: relative;
    right: 1.5vw;
  }
}
</style>